<template>
  <div>
    <div class="container">
        <div class="box">
          <div class="item" @mouseover="getscoll" v-for="(item,index) in pic" :key="index">
            <img :src="item.src" alt="" width="500px" height="400px">
          </div>
        </div>
    </div>
  </div>
    </template>
    <script>
    export default {
      data(){
        return{
          pic:[
                {
                    src:'https://img2.baidu.com/it/u=3784333616,1631661194&fm=253&fmt=auto&app=138&f=JPEG?w=749&h=500'
                },
                {
                    src:'https://img2.baidu.com/it/u=3067708895,1799465716&fm=253&fmt=auto&app=138&f=JPEG?w=752&h=500'
                },
                {
                    src:'https://img2.baidu.com/it/u=3952964989,36936153&fm=253&fmt=auto&app=138&f=JPEG?w=900&h=449'
                },
                // -----
                {
                    src:'https://img2.baidu.com/it/u=549660128,2751598091&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500'
                },
                {
                    src:'https://img2.baidu.com/it/u=1513303444,1029709776&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067'
                },
                {
                    src:'https://img0.baidu.com/it/u=269587204,3994517811&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1345'
                },
                // ---------
                {
                    src:'https://img2.baidu.com/it/u=3343374519,3370257561&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1455'
                },
                {
                    src:'https://img2.baidu.com/it/u=2015445656,1247012005&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1428'
                },
                {
                    src:'https://img2.baidu.com/it/u=1925440351,2217858683&fm=253&fmt=auto&app=138&f=JPEG?w=752&h=500'
                },
            ],
            timer:null
            
        }
      },
      methods: {
    // getscoll() {
    //   if (this.timer) return; // 防止重复启动定时器

    //   this.timer = setInterval(() => {
    //     const items = document.querySelectorAll('.item');
    //     items.forEach(item => {
    //       if (item.offsetLeft <= -4500) {
    //         item.style.left = '0px';
    //       } else {
    //         item.style.left = (item.offsetLeft - 5) + 'px';
    //       }
    //     });
    //   }, 100);
    // }
  }
    }
    </script>
    <style scoped>
    .container{
      width: 100vw;
      height: 100vh;
      background-color: black;
      position: relative;
    }
   .box{
    width: 500px;
    height: 400px;
    border: 2px solid white;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: space-between;
    /* overflow: hidden; */
   }
   .item{
    width: 500px;
    height: 400px;
    position: absolute;
    left: 0px;
    top:0px;
   }
    </style>
